<!doctype html>
<html lang="zh-CN">
<head>
    <!-- 必须的 meta 标签 -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap 的 CSS 文件 -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css" integrity="sha384-zCbKRCUGaJDkqS1kPbPd7TveP5iyJE0EjAuZQTgFLD2ylzuqKfdKlfG/eSrtxUkn" crossorigin="anonymous">

    <title>TodoWork!</title>
</head>
<body>
<div class="container-fluid">
    <nav class="navbar navbar-expand-lg navbar-light bg-light">
        <a class="navbar-brand" href="mainpage.html">题单</a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>

        <div class="collapse navbar-collapse" id="navbarSupportedContent">
            <ul class="navbar-nav mr-auto">
                <li class="nav-item active">
                    <a class="nav-link" href="mainpage.html">题单<span class="sr-only">(current)</span></a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="Submit.html">提交题目</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="Submit.html">英语四级听力练习(计划开发)</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="AboutMe.html">我的发布</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="Score.html">我的成绩</a>
                </li>
            </ul>
        </div>
    </nav>
    <div align="center">
        <ul class="nav nav-tabs">
            <li class="nav-item">
                <a class="nav-link auto active" href="#">文件提交(Alpha)</a>
            </li>
            <li class="nav-item">
                <a class="nav-link hand disabled" href="#">手动录入(测试阶段)</a>
            </li>
        </ul>
        <div class="datum" style="margin-top: 50px">
            <a href="data.docx">点击下载提交样例</a>
                 <input type="text" placeholder="请输入题目" class="qtitle" style="width: 80%;height: 40px"> <br><br>
                        <button type="button" class="btn btn-success autostart">提交</button>
        </div>


    </div>
    <div id="state" style="margin-top: 100px">

    </div>
</div>

<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>
<script src="https://cdn.staticfile.org/jquery-cookie/1.4.1/jquery.cookie.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-fQybjgWLrvvRgtW6bFlB7jaZrFsaBXjsOMm/tB9LTS58ONXgqbR9W8oWht/amnpF" crossorigin="anonymous"></script>

<script>
    var allQuestion = [];
    var len = 0;
    var pattern = "";
    var title;
    var user = $.cookie('user')
    var account = $.cookie('account')
    //下一题
    $(".datum").on("click",".nextQuestion",function () {
        allQuestion[len++] = {"question": $("#question").val(),"A":$("#A").val(),"B":$("#B").val(),"C":$("#C").val(),"D":$("#D").val(),"right":$("input[type=radio][name=right]:checked").val()};

        switch (pattern) {
            case "选择题":
                singleChoice(title);
                break;
        }
    })
    //保存
    $(".datum").on("click",".saveQuestion",function () {
        allQuestion[len++] = {"question": $("#question").val(),"A":$("#A").val(),"B":$("#B").val(),"C":$("#C").val(),"D":$("#D").val(),"right":$("input[type=radio][name=right]:checked").val()};

        $.ajax({
            type: 'post',
            url: '/ReceiveHandFile',
            data: {
                'data':JSON.stringify(allQuestion),
                'title':title
            },
            traditional: true,
            async: false,
            dataType: 'json',
            success: function(data) {
                if(data){
                    sendMessage("成功!","已成功提交，马上生效","success");
                }else{
                    sendMessage("失败!","提交被拒绝","warning");
                }
            },
            error: function(data) {
                sendMessage("失败!","请联系管理员!","warning");
            }
        });
    })

    //开始答题
    $(".datum").on("click",".start",function (){
        title = $(".qtitle").val()
        if(title === null || title === ""){
            sendMessage("错误！","请先填写试题名","warning");
            return;
        }
        $.ajax({
            type: 'post',
            url: '/CreatTable',
            data: {
                'title':title
            },
            traditional: true,
            async: false,
            dataType: 'json',
            success: function(data) {
                console.log("成功")
            },
            error: function(data) {
                console.log("创建失败");
            }
        });

        var choice = $(".form-control").val();
        pattern = choice;
        switch (choice) {
            case "选择题":
                singleChoice(title);
                break;
        }
    })
    //单选题
    function singleChoice(title) {
        $(".datum").empty()
        var str = "        试题名: " + title + "<br>" +
            "题目 : <input type=\"text\" id=\"question\" style=\"width: 90%\"> <br>\n" +
            "            A: <input type=\"text\" id=\"A\" style=\"margin-top: 50px;width: 80% \"> <br>\n" +
            "            B: <input type=\"text\" id=\"B\" style=\"margin-top: 50px;width: 80%\"> <br>\n" +
            "            C: <input type=\"text\" id=\"C\" style=\"margin-top: 50px;width: 80%\"> <br>\n" +
            "            D: <input type=\"text\" id=\"D\" style=\"margin-top: 50px;width: 80%\"> <br>\n" +
            "      答案  &nbsp;   A:  <input type='radio' name='right' value='A'> B:  <input type='radio' name='right' value='B'> C:  <input type='radio' name='right' value='C'> D:  <input type='radio' name='right' value='C'>  " +
            "        <button type=\"button\" class=\"btn btn-primary nextQuestion\" style=\"margin-top: 50px \">下一题</button>\n" +
            "        <button type=\"button\" class=\"btn btn-success saveQuestion\" style=\"margin-top: 50px;margin-left: 20px\" > 保存 </button>\n"
        $(".datum").append(str);
    }

    //分页框切换
    $(".hand").on("click",function () {
        $(this).addClass("active");
        $(this).parents().siblings().children().removeClass("active");
        $(".datum").empty()
        var str = "      <input type=\"text\" placeholder=\"请输入题目\" class=\"qtitle\" style=\"width: 80%;height: 40px\"> <br><br>\n" +
            "            <div class=\"form-group\">\n" +
            "                <label for=\"exampleFormControlSelect1\">Example select</label>\n" +
            "                <select class=\"form-control\" id=\"exampleFormControlSelect1\">\n" +
            "                    <option>选择题</option>\n" +
            "                    <option>填空题</option>\n" +
            "                    <option>多选题</option>\n" +
            "                    <option>简答题</option>\n" +
            "                </select>\n" +
            "            </div>\n" +
            "            <button type=\"button\" class=\"btn btn-success start\">开始答题</button>"
        $(".datum").append(str);
    })
    //自动提交页面
    $(".auto").on("click",function () {
        $(this).addClass("active");
        $(this).parents().siblings().children().removeClass("active");
        $(".datum").empty()
        var str =
            "      <input type=\"text\" placeholder=\"请输入题目\" class=\"qtitle\" style=\"width: 80%;height: 40px\"> <br><br>\n" +
            "            <button type=\"button\" class=\"btn btn-success autostart\">提交</button>";
        $(".datum").append(str);
    })
    //提交文件
    function submitFile(){
        $(".datum").empty()
        var str = "            <div class=\"form-group\" style=\"margin-top: 50px\">\n" +
            "                <input type=\"file\"  id=\"file\" style=\"width: 45%\">\n" +
            "                <br><br>\n" +
            "                <input class=\"submit\" type=\"button\" value=\"提交\">\n" +
            "            </div>";
        $(".datum").append(str);
    }
    //自动提交文件2
    $(".datum").on("click",".autostart",function (){
        title = $(".qtitle").val()
        if(title === null || title === ""){
            sendMessage("错误！","请先填写试题名","warning");
            return;
        }
        $.ajax({
            type: 'post',
            url: '/CreatTable',
            data: {
                'title':title,
                'user':account
            },
            traditional: true,
            async: false,
            dataType: 'json',
            success: function(data) {
                console.log("成功")
                submitFile();
            },
            error: function(data) {
                console.log("创建失败");
                sendMessage("服务器连接错误","联系管理员","danger");
            }
        });

    })

    //提交自动处理文件
    $(".datum").on("click",".submit",function() {
        var myFormData = new FormData();
        var file = $("#file")[0].files[0];
        myFormData.append("file",file);

        $.ajax({
            type: 'post',
            url: '/ReceiveFile',
            data: myFormData,
            contentType:false,
            processData:false,
            success: function(data) {
                sendMessage("成功!","已成功提交申请","success");
            },
            error: function(data) {
                sendMessage("失败!","请联系管理员!","warning");
            }
        });
    });
    var m_clock = '';
    function sendMessage(tile,inner,state){

        $("#state").empty();
        var str = "<div style='margin-top: 50px' class=\"alert alert-"+state+" alert-dismissible rowmargin fade show\">" +
            "<button type=\"button\" class=\"close\" data-dismiss=\"alert\">&times;</button>" +
            "<strong>"+tile+"</strong> "+inner+"!" +
            "</div>";
        $("#state").append(str);
        m_clock = setInterval(closeMessage,5000);
    }

    function closeMessage() {
        $("#state").empty();
        clearInterval(m_clock)
    }
</script>

</body>
</html>